<template>
    <div class="major-box">
        <div class="basic" v-show="!teacherVisable">
            <div class="search-row">
                <div class="search-item">
                    <el-input v-model="courseName" placeholder="请输入课程名称"></el-input>
                    <el-select v-model="major" class="m-2" placeholder="请选择所属专业">
                        <el-option label="计算机科学与技术" value="计算机科学与技术" />
                        <el-option label="软件工程" value="软件工程" />
                        <el-option label="网络工程" value="网络工程" />
                    </el-select>
                    <el-select v-model="courseType" class="m-2" placeholder="请选择课程类型">
                        <el-option :key="1" label="必修课" value="1" />
                        <el-option :key="2" label="选修课" value="2" />
                    </el-select>
                    <el-select v-model="teachingMode" class="m-2" placeholder="请选择授课方式">
                        <el-option key="o" label="章节式教学" value="章节式教学" />
                        <el-option key="o" label="项目式教学" value="项目式教学" />
                    </el-select>
                    <el-input v-model="teacherName" placeholder="请输入授课教师"></el-input>
                    <el-select v-model="publishStatus" class="m-2" placeholder="请选择课程状态">
                        <el-option key="o" label="未发布" value="1" />
                        <el-option key="o" label="已发布" value="2" />
                    </el-select>
                </div>
                <div class="search-actions">
                    <el-button type="primary" @click="handleSearch">
                        <el-icon><Search /></el-icon>查询
                    </el-button>
                    <el-button @click="handleSearch(2)">
                        <el-icon><RefreshLeft /></el-icon>重置
                    </el-button>
                </div>
            </div>
            <div class="table-area">
                <div class="left-buttons">
                    <el-button type="primary" class="btns" @click="addCourse">
                        <img src="@/assets/add-point.png" alt="">
                        <span>新建课程</span>
                    </el-button>
                    <el-button class="manage" @click="importCourse">
                        <span>批量导入</span>
                    </el-button>
                </div>
                <el-table ref="multipleTableRef" :data="course" style="width: 100%" @selection-change="handleSelectionChange" >
                    <el-table-column type="selection" />
                    <el-table-column prop="content" label="课程名称" width="200">
                        <template #default="scope">
                            <el-tooltip class="box-item" effect="dark" :content="scope.row.courseName" placement="top-start" > <div class="text">{{ scope.row.courseName }}</div> </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="content" label="所属专业" width="120">
                        <template #default="scope">
                            <el-tooltip class="box-item" effect="dark" :content="scope.row.major" placement="top-start" > <div class="text">{{ scope.row.major }}</div> </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="content" label="课程性质" width="120">
                        <template #default="scope">
                            <span v-show="scope.row.courseType == 1">必修课</span>
                            <span v-show="scope.row.courseType == 2">选修课</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="content" label="授课方式" width="120">
                        <template #default="scope"> {{ scope.row.teachingMode }} </template>
                    </el-table-column>
                    <el-table-column prop="content" label="授课教师" width="120">
                        <template #default="scope"> {{ scope.row.teacher }} </template>
                    </el-table-column>
                    <el-table-column prop="target" label="课程目标" width="120" />
                    <el-table-column prop="knowledge" label="知识点" width="100" />
                    <el-table-column prop="government" label="思政点" width="100" />
                    <el-table-column prop="booknum" label="教材数" width="100" />
                    <el-table-column prop="resource" label="资源" width="80" />
                    <el-table-column prop="question" label="习题" width="80" />
                    <el-table-column prop="content" label="课程状态" width="120">
                        <template #default="scope">
                            <span v-show="scope.row.publishStatus == 1">已发布</span>
                            <span v-show="scope.row.publishStatus == 2">未发布</span>
                        </template>
                    </el-table-column>
                    <el-table-column property="name" label="操作" align="center" width="300" fixed="right">
                        <template #default="scope">
                            <div class="material-operations">
                                <el-link type="primary" @click="publishCourse(scope.row)" underline="false" v-show="scope.row.publishStatus == 2"><span>发布</span></el-link>
                                <el-link type="info" underline="false" v-show="scope.row.publishStatus == 1" disabled><span>发布</span></el-link>
                                <el-link type="primary" @click="editCourse(scope.row)" underline="false"><span>编辑</span></el-link>
                                <el-link type="primary" @click="setTeacher(scope.row)" underline="false"><span>教师</span></el-link>
                                <el-link type="primary" @click="showBox(scope.row)" underline="false"><span>查看</span></el-link>
                                <el-link type="primary" @click="showDetail(scope.row)" underline="false"><span>详情</span></el-link>
                                <el-link type="danger" @click="delCourse(scope.row)" underline="false"><span class="danger">删除</span></el-link>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pages">
                    <el-pagination small background layout="prev, pager, next,total" :total="totalNum" :page-size="pageSize" :current-page="currPage" class="mt-4" @current-change="handleCurrentChange" />
                </div>
            </div>
        </div>
        <div class="teacher-box" v-show="teacherVisable">
            <div class="table-area">
                <div class="left-buttons">
                    <el-button type="primary" class="btns" @click="addTeacher">
                        <span style="margin-left: 0;">添加教师</span>
                    </el-button>
                    <el-button class="manage" @click="backIndex">
                        <span style="margin-left: 0;">返回</span>
                    </el-button>
                </div>
                <el-table ref="multipleTableRef" :data="teacher" style="width: 100%" @selection-change="handleSelectionChange" >
                    <el-table-column prop="name" label="教师姓名">
                        <template #default="scope">
                            <el-tooltip class="box-item" effect="dark" :content="scope.row.name" placement="top-start" > <div class="text">{{ scope.row.name }}</div> </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="account" label="教师账号">
                        <template #default="scope">
                            <el-tooltip class="box-item" effect="dark" :content="scope.row.account" placement="top-start" > <div class="text">{{ scope.row.account }}</div> </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="institution" label="所属组织机构" />
                    <el-table-column prop="level" label="职业级别" />
                    <el-table-column prop="jobs" label="职务" />
                    <el-table-column prop="major" label="专业" />
                    <el-table-column prop="grade" label="年级" />
                    <el-table-column prop="class" label="班级" width="260" />
                </el-table>
                <div class="pages">
                    <el-pagination small background layout="prev, pager, next" :total="50" class="mt-4" />
                </div>
            </div>
        </div>
    </div>
    <el-dialog v-model="addDialogVisable" title="Tips" width="65%" top="5vh">
        <template #header>
            <div class="my-header">
                <span>{{ addTitles }}</span>
            </div>
        </template>
        <div class="major-dialog">
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text">课程名称</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-input v-model="form.courseName" placeholder="请输入课程名称" :disabled="btnShow" />
                    </div>
                </div>
                <div class="form-item">
                    <div class="items">
                        <div class="text">所属专业</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-select v-model="form.major" class="m-2" placeholder="请选择所属专业" :disabled="btnShow">
                            <el-option label="计算机科学与技术" value="计算机科学与技术" />
                            <el-option label="软件工程" value="软件工程" />
                            <el-option label="网络工程" value="网络工程" />
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text">课程类型</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-select v-model="form.courseCategory" class="m-2" placeholder="请选择课程类型" :disabled="btnShow">
                            <el-option label="专业基础课" value="专业基础课" />
                            <el-option label="专业核心课" value="专业核心课" />
                            <el-option label="公共基础课" value="公共基础课" />
                        </el-select>
                    </div>
                </div>
                <div class="form-item">
                    <div class="items">
                        <div class="text">课程性质</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <div class="class-switch">
                            <div class="slider" :class="{'mode-1': nature === 0, 'mode-2': nature === 1}"  :style="natureStyle"></div>
                            <div class="switch-item" :class="{active: nature === 0}" @click="nature = 0">必修课</div>
                            <div class="switch-item" :class="{active: nature === 1}" @click="nature = 1">选修课</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="add-form">
                <div class="left-item">
                    <div class="form-item">
                        <div class="items">
                            <div class="text">学时</div>
                            <div class="reds">*</div>
                        </div>
                        <div class="inputs">
                            <el-input v-model="form.hours" placeholder="请输入学时" type="number" :disabled="btnShow" />
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="items">
                            <div class="text">学分</div>
                            <div class="reds">*</div>
                        </div>
                        <div class="inputs">
                            <el-input v-model="form.credits" placeholder="请输入学分" type="number" :disabled="btnShow" />
                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="items">
                        <div class="text">授课方式</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <div class="class-switch">
                            <div class="slider" :class="{'mode-1': method === 0, 'mode-2': method === 1}"  :style="methodStyle"></div>
                            <div class="switch-item" :class="{active: method === 0}" @click="selectModal(0)">项目式教学</div>
                            <div class="switch-item" :class="{active: method === 1}" @click="selectModal(1)">章节式教学</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="add-form">
                <div class="left-item">
                    <div class="form-item" v-if="method == 0">
                        <div class="items">
                            <div class="text">前置课程</div>
                            <div class="reds">*</div>
                        </div>
                        <div class="inputs">
                            <el-select v-model="value" class="m-2" placeholder="请选择前置课程">
                                <el-option :key="o" label="item.label" value="item.value" v-for="o in 6" />
                            </el-select>
                        </div>
                    </div>
                    <div class="form-item" v-if="method == 1">
                        <div class="items">
                            <div class="text">课程结构</div>
                            <div class="reds">*</div>
                        </div>
                        <div class="inputs">
                            <el-select v-model="value" class="m-2" placeholder="请选择课程结构">
                                <el-option :key="o" label="item.label" value="item.value" v-for="o in 6" />
                            </el-select>
                        </div>
                    </div>
                </div>
                <div class="left-item">
                    <div class="form-item">
                        <div class="items">
                            <div class="text">课程封面</div>
                            <!-- <div class="reds">*</div> -->
                        </div>
                        <div class="inputs">
                            <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" >
                                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                            </el-upload>
                        </div>
                    </div>
                </div>
            </div>
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text">课程简介</div>
                    </div>
                    <div class="inputs">
                        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
                        <Editor style="height: 160px;text-align: left;" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
                    </div>
                </div>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="addCourse()" v-show="!btnShow">取消</el-button>
                <el-button type="primary" @click="setTeacherAndFinish" v-show="!btnShow">完成并配置教师</el-button>
                <el-button type="primary" @click="submitAddCourse()" v-show="!btnShow">完成</el-button>
                <el-button type="primary" @click="addDialogVisable = false" v-show="btnShow">关闭</el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="importDialogVisable" title="Tips" width="35%" top="25vh">
        <template #header>
            <div class="my-header">
                <span>新建专业</span>
            </div>
        </template>
        <div class="import-dialog">
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text" style="flex: 0 0 100px;">下载</div>
                        <el-link type="primary">点击下载批量导入模板</el-link>
                    </div>
                </div>
            </div>
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text" style="flex: 0 0 100px;">专业</div>
                        <el-select v-model="value" placeholder="请选择专业">
                            <el-option label="专业1" value="专业1" />
                            <el-option label="专业1" value="专业1" />
                            <el-option label="专业1" value="专业1" />
                            <el-option label="专业1" value="专业1" />
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text" style="flex: 0 0 100px;">前置课程</div>
                        <el-select v-model="value" placeholder="请选择前置课程">
                            <el-option label="前置课程1" value="前置课程1" />
                            <el-option label="前置课程1" value="前置课程1" />
                            <el-option label="前置课程1" value="前置课程1" />
                            <el-option label="前置课程1" value="前置课程1" />
                        </el-select>
                    </div>
                </div>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="importCourse()">上传</el-button>
                <el-button @click="importCourse()">取消</el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="addTeacherDialogVisable" title="Tips" width="35%" top="25vh">
        <template #header>
            <div class="my-header">
                <span>新建专业</span>
            </div>
        </template>
        <div class="import-dialog">
            <div class="add-form">
                <div class="items" style="flex: 0 0 100%;">
                    <div class="text" style="flex: 0 0 100px;">教师/职称</div>
                    <el-select v-model="value" class="m-2" placeholder="请选择教师" style="width: 100%;">
                        <el-option :key="o" label="计算机教师/正高级教师" value="计算机教师/正高级教师" v-for="o in 6" />
                    </el-select>
                </div>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="addTeacher()">取消</el-button>
                <el-button type="primary" @click="addTeacher()">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
    import { ref, defineEmits, computed, shallowRef, reactive,onMounted } from 'vue'
    import { RefreshLeft,Search,Plus } from '@element-plus/icons-vue'
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
    import '@wangeditor/editor/dist/css/style.css'
    import api from '@/api/index.js' 
    import { ElMessage,ElMessageBox } from 'element-plus'

    const addDialogVisable = ref(false);
    const editVisable = ref(false);
    const importDialogVisable = ref(false);
    const teacherVisable = ref(false);
    const addTeacherDialogVisable = ref(false);
    const btnShow = ref(false);
    const addTitles = ref('新建课程');
    const emit = defineEmits(['update-show-visable'])
    //搜索相关
    const courseName = ref(); //课程名称
    const major = ref(); //所属专业
    const courseType = ref(); //课程类型
    const publishStatus = ref(); //课程状态
    const teacherName = ref(); //授课老师
    const teachingMode = ref(); //授课方式
    const ids = ref(); //修改id


    const course = ref([]);
    const teacher = ref([
        {
            name: '计算机教师/蒲公英学员教师01',
            account: 'test001',
            institution: '演示',
            level: '正高级教师',
            jobs: '教务主任',
            major: '计算机科学与技术',
            grade: '2025级',
            class: '计算机科学与技术25级别1班',
        },
        {
            name: '计算机教师/蒲公英学员教师01',
            account: 'test001',
            institution: '演示',
            level: '正高级教师',
            jobs: '教务主任',
            major: '计算机科学与技术',
            grade: '2025级',
            class: '计算机科学与技术25级别1班',
        },
        {
            name: '计算机教师/蒲公英学员教师01',
            account: 'test001',
            institution: '演示',
            level: '正高级教师',
            jobs: '教务主任',
            major: '计算机科学与技术',
            grade: '2025级',
            class: '计算机科学与技术25级别1班',
        },
        {
            name: '计算机教师/蒲公英学员教师01',
            account: 'test001',
            institution: '演示',
            level: '正高级教师',
            jobs: '教务主任',
            major: '计算机科学与技术',
            grade: '2025级',
            class: '计算机科学与技术25级别1班',
        },
        {
            name: '计算机教师/蒲公英学员教师01',
            account: 'test001',
            institution: '演示',
            level: '正高级教师',
            jobs: '教务主任',
            major: '计算机科学与技术',
            grade: '2025级',
            class: '计算机科学与技术25级别1班',
        },
    ]);

    const nature   = ref(1)
    const natureStyle = computed(() => ({
        width: `50%`,
        transform: `translateX(${nature.value * 100}%)`
    }));
    const method   = ref(0)
    const methodStyle = computed(() => ({
        width: `50%`,
        transform: `translateX(${method.value * 100}%)`
    }));
    const imageUrl   = ref('')
    // 表单数据对象
    const form = reactive({
        courseName: '', // 课程名称
        teacher: '', // 教师
        school: '', // 学校/机构
        college: '', // 学院
        major: '', // 专业
        courseType: nature.value + 1, // 课程类型：1-必修课，2-选修课
        publishStatus: 2, // 发布状态：1-已发布，2-未发布
        courseLabel: '', // 课程标签
        courseCategory: '', // 课程分类
        teachingMode: '项目式教学', // 教学模式
        hours: 0, // 学时
        credits: 0, // 学分
    })

    const addCourse = () => {
        editVisable.value  =  false;
        addDialogVisable.value = !addDialogVisable.value;
    }
    const editCourse = async (row) => {
        addTitles.value = '编辑课程';
        editVisable.value  =  !editVisable.value;
        addDialogVisable.value = !addDialogVisable.value;
        const response = await api.get_course({ id:row.id })
        if( response ){
            Object.assign(form, response);
        }
        console.log(response)
        ids.value = row.id
    }
    const delCourse = async (row) => {
        ElMessageBox.confirm( '确认删除此课程？', '确认删除', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ) .then(async () => {
            const response = await api.del_course({ id:row.id })
            if( response ){
                ElMessage({ type: 'success', message: '删除成功！', })
                getCourseList()
            } else {
                ElMessage({ type: 'error', message: '删除失败！', })
            }
        }) .catch(() => { })
    }
    const publishCourse = async (row) => {
        ElMessageBox.confirm( '确认发布此课程？', '确认发布', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ) .then(async () => {
            const response = await api.publish_course({ id:row.id })
            if( response ){
                ElMessage({ type: 'success', message: '发布成功！', })
                getCourseList()
            } else {
                ElMessage({ type: 'error', message: '发布失败！', })
            }
        }) .catch(() => { })
    }
    const setTeacher = (row) => {
        emit('update-show-visable', 1, row.id); 
    }
    const showDetail = () => {
        emit('update-show-visable', 2);
    }
    const showBox = () => {
        addDialogVisable.value = !addDialogVisable.value;
        btnShow.value = !btnShow.value;
    }
    const importCourse = () => {
        importDialogVisable.value = !importDialogVisable.value;
    }
    const editorRef = shallowRef();
    const valueHtml = ref("<p>初始内容</p>");

    const toolbarConfig = {
        excludeKeys: ["uploadVideo", "fullScreen"],
    };
    const editorConfig = ref({
        placeholder: "请输入内容详情...",
        MENU_CONF: {} 
    });
    const handleCreated = (editor) => {
        editorRef.value = editor;
    };
    const selectModal = (value) => {
        method.value = value;
    };
    const configureTeacher = ref(false);
    // 新增课程方法
    const submitAddCourse = async () => {
        configureTeacher.value = false
        try {
            if (!form.courseName) {
                ElMessage.error('请输入课程名称')
                return
            }
            if (!form.major) {
                ElMessage.error('请选择所属专业')
                return
            }
            if (!form.hours || form.hours <= 0) {
                ElMessage.error('请输入有效的学时')
                return
            }
            if (!form.credits || form.credits <= 0) {
                ElMessage.error('请输入有效的学分')
                return
            }
            const courseData = {
                courseName: form.courseName,
                teacher: form.teacher,
                school: form.school,
                college: form.college,
                major: form.major,
                courseType: form.courseType,
                publishStatus: form.publishStatus,
                courseLabel: form.courseLabel,
                courseCategory: form.courseCategory,
                teachingMode: form.teachingMode,
                hours: parseInt(form.hours),
                credits: parseInt(form.credits)
            }
            console.log("表单信息：",courseData)
            var success,error;
            var response;
            if( ids.value ){
                courseData.id = ids.value
                response = await api.update_course(courseData)
                console.log("返回信息：",response)
                success = '更新课程成功';
                error = '更新课程失败';
                ids.value = 0;
            } else {
                response = await api.add_course(courseData)
                console.log("返回信息：",response)
                success = '新增课程成功';
                error = '新增课程失败';
            }
            if ( response ) {
                ElMessage.success(success)
                addDialogVisable.value = false
                resetForm()
                if (configureTeacher.value) {
                    const courseId = response.id || ids.value
                    emit('update-show-visable', 1, courseId)
                } else {
                    getCourseList()
                }
            } else {
                ElMessage.error(response.message || error)
            }
        } catch (error) {
            console.error('新增课程失败:', error)
        }
    }
    const currPage   = ref(1)
    const pageSize   = ref(15)
    const totalNum   = ref(0)
    const handleCurrentChange = (page) => {
        currPage.value = page
        getCourseList()
    }
    const getCourseList = async () => {
        const params = {
            pageNum: currPage.value,
            pageSize: pageSize.value,
            name: courseName.value,
            major: major.value,
            courseType: courseType.value,
            publishStatus: publishStatus.value,
            teacher: teacherName.value,
            teachingMode: teachingMode.value,
        }
        const response = await api.course_list(params)
        course.value = response.list
        totalNum.value = response.total
    }
    const handleSearch = (reset = 1) => {
        currPage.value = 1 
        if( reset == 2 ){
            courseName.value = ''
            major.value = ''
            courseType.value = ''
            publishStatus.value = ''
            teacherName.value = ''
            teachingMode.value = ''
            getCourseList()
        } else {
            getCourseList()
        }
    }
    // 重置表单方法
    const resetForm = () => {
        form.courseName = ''
        form.teacher = ''
        form.school = ''
        form.college = ''
        form.major = ''
        form.courseType = 1
        form.publishStatus = 2
        form.courseLabel = ''
        form.courseCategory = ''
        form.teachingMode = '项目式教学'
        form.hours = 0
        form.credits = 0
        valueHtml.value = '<p>初始内容</p>'
        imageUrl.value = ''
    }
    const setTeacherAndFinish = () => {
        configureTeacher.value = true
        submitAddCourse()
    }

    onMounted(() => {
        getCourseList();
    });
</script>
<style scoped>
    :deep(.el-input__wrapper){background: #F2F3FA!important;}
    :deep(.el-table__row:nth-child(odd)){background: #ffffff!important;}
    :deep(.el-table__row:nth-child(even)){background: #F5F8FE!important;}
    :deep(.el-table th.el-table__cell) { background-color: #D2E3FB; }
    :deep(.el-input) { width: 100%;height: 35px; }
    :deep(.search-item .el-input) { flex: 0 0 200px;height: 35px; }
    :deep(.el-select) { flex: 0 0 200px;height: 35px; }
    :deep(.el-select__wrapper) { height: 35px; }
    :deep(.dialog-footer span) { font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px!important; }
    .major-box{width: 100%;border-radius: 8px;background: #fff;height: calc(85vh + 20px); }
    .search-row { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 15px;background: #fff;padding: 20px;border-radius: 8px;justify-content: space-between; }
    .search-item { display: flex;flex-direction: row;gap: 20px; }
    .el-button:hover{color: #1465E1!important;border: 1px solid #1465E1;}
    .el-button--primary{background: #1465E1!important;border: 1px solid #1465E1;}
    .el-button--primary:hover{color: #fff!important;}
    .table-area { background: white; border-radius: 4px; padding: 20px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); }
    .table-area .text{ width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 14px;font-family: 微软雅黑, Microsoft YaHei, SimSun; }
    .pages{display: flex;flex-direction: row;justify-content: end;padding-top: 30px;position: absolute;bottom: 30px;right: 30px;}
    .material-operations{display: flex;justify-content: space-around;font-family: 微软雅黑, Microsoft YaHei, SimSun;}
    .material-operations span{font-size: 12px!important;}
    .material-operations span:hover{color: #1465E1;}
    .material-operations .danger:hover{color: red;}
    .add-major{width: 120px;background: #1465E1;height: 35px;display: flex;flex-direction: row;align-items: center;justify-content: center;border-radius: 4px;margin-bottom: 20px;cursor: pointer;}
    .add-major img{width: 20px;height: 20px;}
    .add-major span{margin-left: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;color: #fff;font-size: 14px;}
    .my-header{text-align: left;}
    .add-form{ width: calc(100% - 30px);margin: 10px auto;display: flex;flex-direction: row; gap: 20px; }
    .form-item{flex: 1;}
    .add-form .items{display: flex;flex-direction: row;gap: 5px;align-items: center;}
    .add-form .items .reds{ color: red; }
    .add-form .inputs{ margin-top: 10px; }
    .left-buttons { display: flex; gap: 12px; height: 55px; }
    .left-buttons img{width: 18px;}
    .left-buttons .btns{background: #1465E1;height: 35px;}
    .left-buttons .manage{color: #1465E1;height: 35px;border: 1px solid #1465E1;}
    .left-buttons span{margin-left: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px;}
    .class-switch{position: relative;}
    .class-switch .switch-item { cursor: pointer; position: relative; transition: color 0.3s ease; text-align: center; color: #7f8c8d;z-index: 2; }
    .slider { border-radius: 35px; height: 35px; background: #3869E7; z-index: 1; transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); position: absolute; top: 0; }
    .switch-item.active { color: white; }
    .mode-1 { background: #1465E1; }
    .mode-2 { background: #1465E1; }
    .form-item .class-switch{display: flex;flex-direction: row;width: 100%;background: #F7F7F7;border-radius: 40px;margin-top: 10px;}
    .form-item .class-switch .switch-item{width: 50%;height: 35px;line-height: 35px;}
    .left-item{display: flex;flex-direction: row; flex: 0 0 49%;gap: 10px;}
    .avatar-uploader .avatar { width: 178px; height: 178px; display: block; }
    :deep(.avatar-uploader) { display: flex;flex-direction: row;justify-content: start; }
    :deep(.avatar-uploader .el-upload) { border: 1px dashed var(--el-border-color); border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; transition: var(--el-transition-duration-fast); }
    :deep(.avatar-uploader .el-upload:hover) { border-color: var(--el-color-primary); }
    :deep(.el-icon.avatar-uploader-icon) { font-size: 28px; color: #8c939d; width: 178px; height: 178px; text-align: center; }
    .import-dialog .add-form{margin-top: 20px;}
    :deep(.el-scrollbar__view){display: block!important;}
    :deep(.el-table__header){width: 100%!important;}
    :deep(.el-table__body){width: 100%!important;}
    .basic{height: 100%;display: flex;flex-direction: column;}
    .basic .table-area{height: 100%;}
</style>